{% extends 'base.html' %}

{% block title %}系统配置{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏（与admin_home一致） -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        <div class="list-group">
            <a href="{% url 'dashboard' %}" class="list-group-item list-group-item-action " data-target="content-dashboard">仪表盘</a>
            <a href="{% url 'user_manage' %}" class="list-group-item list-group-item-action">用户管理</a>
            <a href="{% url 'content_manage' %}" class="list-group-item list-group-item-action">内容管理</a>
            <a href="{% url 'system_config' %}" class="list-group-item list-group-item-action active">系统配置</a>
            <a href="{% url 'data_statistics' %}" class="list-group-item list-group-item-action">数据统计</a>
            <a href="{% url 'log_manage' %}" class="list-group-item list-group-item-action">日志管理</a>
            <a href="{% url 'message_center' %}" class="list-group-item list-group-item-action">消息中心</a>
            <a href="{% url 'help_document' %}" class="list-group-item list-group-item-action">帮助文档</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="col-md-9 col-lg-10 p-4">
        <h3 class="mb-4 text-center font-weight-bold">系统配置</h3>

        <!-- 基础设置面板 -->
        <div class="card mb-4">
            <div class="card-header bg-light cursor-pointer" onclick="togglePanel('basicSettings')">
                <div class="d-flex justify-content-between">
                    <h5 class="mb-0 text-gray-700">基础设置</h5>
                    <i id="basicSettingsIcon" class="fa fa-chevron-down"></i>
                </div>
            </div>
            <div id="basicSettings" class="card-body">
                <form class="row g-3">
                    <div class="col-md-6">
                        <label for="system_name" class="form-label">系统名称</label>
                        <input type="text" class="form-control bg-blue-50 border border-blue-200" id="system_name" value="管理后台">
                    </div>
                    <div class="col-md-6">
                        <label for="system_version" class="form-label">版本号</label>
                        <input type="text" class="form-control bg-blue-50 border border-blue-200" id="system_version" value="1.0.0">
                    </div>
                    <div class="col-md-6">
                        <label for="host_name" class="form-label">主机名</label>
                        <input type="text" class="form-control bg-blue-50 border border-blue-200" id="host_name" value="localhost">
                    </div>
                    <div class="col-md-6">
                        <label for="language" class="form-label">语言</label>
                        <select class="form-control bg-blue-50 border border-blue-200" id="language">
                            <option value="zh-CN">简体中文</option>
                            <option value="en-US">English</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>

        <!-- 用户管理面板 -->
        <div class="card mb-4">
            <div class="card-header bg-light cursor-pointer" onclick="togglePanel('userManagement')">
                <div class="d-flex justify-content-between">
                    <h5 class="mb-0 text-gray-700">用户管理</h5>
                    <i id="userManagementIcon" class="fa fa-chevron-down"></i>
                </div>
            </div>
            <div id="userManagement" class="card-body">
                <div class="mb-4">
                    <h6>添加用户</h6>
                    <form class="row g-3">
                        <div class="col-md-4">
                            <label for="new_username" class="form-label">用户名</label>
                            <input type="text" class="form-control bg-blue-50 border border-blue-200" id="new_username">
                        </div>
                        <div class="col-md-4">
                            <label for="new_password" class="form-label">密码</label>
                            <input type="password" class="form-control bg-blue-50 border border-blue-200" id="new_password">
                        </div>
                        <div class="col-md-4">
                            <label for="confirm_password" class="form-label">确认密码</label>
                            <input type="password" class="form-control bg-blue-50 border border-blue-200" id="confirm_password">
                        </div>
                        <div class="col-md-4">
                            <label for="user_role" class="form-label">用户角色</label>
                            <select class="form-control bg-blue-50 border border-blue-200" id="user_role">
                                <option value="admin">管理员</option>
                                <option value="user">普通用户</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check mt-4">
                                <input type="checkbox" class="form-check-input" id="user_status" checked>
                                <label class="form-check-label" for="user_status">启用用户</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-primary mt-3">添加用户</button>
                        </div>
                    </form>
                </div>

                <div>
                    <h6>用户列表</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>角色</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>admin</td>
                                <td>管理员</td>
                                <td><span class="badge bg-success">启用</span></td>
                                <td>
                                    <button class="btn btn-sm btn-primary">编辑</button>
                                    <button class="btn btn-sm btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>user1</td>
                                <td>普通用户</td>
                                <td><span class="badge bg-success">启用</span></td>
                                <td>
                                    <button class="btn btn-sm btn-primary">编辑</button>
                                    <button class="btn btn-sm btn-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 日志配置面板 -->
        <div class="card mb-4">
            <div class="card-header bg-light cursor-pointer" onclick="togglePanel('logSettings')">
                <div class="d-flex justify-content-between">
                    <h5 class="mb-0 text-gray-700">日志配置</h5>
                    <i id="logSettingsIcon" class="fa fa-chevron-down"></i>
                </div>
            </div>
            <div id="logSettings" class="card-body">
                <form class="row g-3">
                    <div class="col-md-8">
                        <label for="log_path" class="form-label">日志存储路径</label>
                        <input type="text" class="form-control bg-blue-50 border border-blue-200" id="log_path" value="/var/log/system.log">
                    </div>
                    <div class="col-md-4">
                        <label for="log_level" class="form-label">日志级别</label>
                        <select class="form-control bg-blue-50 border border-blue-200" id="log_level">
                            <option value="debug">DEBUG</option>
                            <option value="info" selected>INFO</option>
                            <option value="warning">WARNING</option>
                            <option value="error">ERROR</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="log_days" class="form-label">日志保留天数</label>
                        <input type="number" class="form-control bg-blue-50 border border-blue-200" id="log_days" value="30">
                    </div>
                </form>
            </div>
        </div>

        <!-- 保存按钮 -->
        <div class="text-center mt-5">
            <button type="button" class="btn btn-primary px-5 py-2 bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800">
                保存配置
            </button>
        </div>
    </div>
</div>

<script>
    // 折叠面板切换函数
    function togglePanel(panelId) {
        const panel = document.getElementById(panelId);
        const icon = document.getElementById(panelId + 'Icon');

        if (panel.style.display === 'none') {
            panel.style.display = 'block';
            icon.classList.remove('fa-chevron-right');
            icon.classList.add('fa-chevron-down');
        } else {
            panel.style.display = 'none';
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-right');
        }
    }

    // 初始化所有面板为展开状态
    document.addEventListener('DOMContentLoaded', function() {
        const panels = ['basicSettings', 'userManagement', 'logSettings'];
        panels.forEach(panelId => {
            togglePanel(panelId);
        });
    });
</script>
{% endblock %}

{% block extra_js %}
<script>
    // 侧边栏交互逻辑
    document.querySelectorAll('.list-group-item').forEach(item => {
        item.addEventListener('click', function(e) {
            document.querySelector('.list-group-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
</script>
{% endblock %}